<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:replace="~{admin/_inc/_layout::layout(~{::title},~{::link},~{::page_script})}">
<head>
<!-- 分类管理 -->
<title>[[#{page.appbasetype} +'|'+#{applicationDisplayName}]]</title>
<!-- bootstrap -->
<link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/3.3.6/css/bootstrap.min.css}">
<!-- datatables -->
<link rel="stylesheet" type="text/css" th:href="@{/webjars/datatables/1.10.20/css/dataTables.bootstrap.css}">
<link rel="stylesheet" type="text/css" th:href="@{/webjars/datatables/1.10.20/css/jquery.dataTables.min.css}">
<link rel="stylesheet" type="text/css" th:href="@{/webjars/framework-ext/1.0.0/datatables/css/dataTables.css}">
<!-- font-awesome -->
<link rel="stylesheet" type="text/css" th:href="@{/webjars/font-awesome/4.7.0/css/font-awesome.min.css}">
<!-- lhgdialog -->
<link rel="stylesheet" type="text/css" th:href="@{/webjars/lhgdialog/4.2.0/skins/bootstrap2.css}">
<!-- bootstrap-datetimepicker -->
<link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap-datetimepicker/2.4.4/css/bootstrap-datetimepicker.min.css}">
<style type="text/css">
body {
	padding-top: 5px;
}

label .required {
	color: red;
}

.container {
	width: 100%;
}

.table {
	margin-bottom: 0;
}

.table>tbody>tr>td {
	vertical-align: middle;
}

.error {
	color: red;
}
</style>
</head>
<body class="container" th:fragment="content">
	<div class="panel panel-primary">
		<div class="panel-heading">
			<!-- // TODO 标题描述 -->
			<div class="panel-title">分类</div>
		</div>
		<div class="panel-body" style="width: 100%; padding: 5px; overflow: hidden; white-space: nowrap">
			<form id="searchForm" class="toolbar">
				<div calss="btn-group btn-group-sm" style='float: right; height: 32px; margin-right: 5px;'>
					<button id='search_btn' type="button" class='fa fa-search btn btn-sm btn-primary' style='float: left; margin-right: 10px;' title='检索' th:data-href="@{/appbasetype/list}">检索</button>
					<button id='add_btn' type="button" class='fa fa-plus btn btn-sm btn-info' style='float: left; margin-right: 10px;' title='添加' th:data-href="@{/appbasetype/insert}">添加</button>
				</div>
				<div style='float: left; height: 32px; margin-right: 5px;'>
					<input id='q_search_key' name='q_search_key' placeholder='输入关键字' style='float: left; margin-right: 5px; height: 32px;' />
				</div>
			</form>
			<table id="tt" class="table table-bordered" width="100%" cellspacing="0" style="white-space: nowrap">
			</table>
			<script type="text/x-template" id="col-opt-btn">
				<button id="edit_btn" type="button" class="fa fa-edit btn btn-sm btn-info" title="编辑" th:data-href="@{/appbasetype/update}" >编辑</button>
				<button id="delete_btn" type="button" class="fa fa-remove btn btn-sm btn-danger" title="删除" th:data-href="@{/appbasetype/delete}" >删除</button>
    		</script>
		</div>
	</div>
	<!--删除modal-->
	<div class="modal fade" id="remove_modal" tabindex="-1" role="dialog" aria-hidden="true" aria-labelledby="remove_modalLabel" data-backdrop="static">
		<div class="modal-dialog" style="width: 300px; margin-top: 100px;">
			<div class="modal-content">
				<div class="modal-header">
					<div class="modal-title">删除信息</div>
				</div>
				<div class="modal-body"></div>
				<div class="modal-footer">
					<button type="button" id="confirm_btn" class="btn btn-danger" data-dismiss="modal">确认</button>
					<button type="button" class="btn btn-primary" data-dismiss="modal">取消</button>
				</div>
			</div>
		</div>
	</div>
	<!--新增&编辑modal-->
	<div class="modal fade" id="form_modal" tabindex="-1" role="dialog" aria-labelledby="form_modal_label" aria-hidden="true" data-backdrop="static">
		<div class="modal-dialog" style="min-width: 600px">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<div class="modal-title">添加数据</div>
				</div>
				<form class="modal-body form-horizontal" role="form">
					<div class="form-group">
						<label class="col-sm-4 control-label" for="typeCode">编码(PK*): </label>
						<div class="col-sm-6">
							<input id="typeCode" name="typeCode" class="input-sm form-control " type="text" style="width: 240px" required />
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-4  control-label required" for="typeName">名称(*): </label>
						<div class="col-sm-6">
							<input id="typeName" name="typeName" class="input-sm form-control " type="text" style="width: 240px" required />
						</div>
					</div>
				</form>
				<div class="modal-footer">
					<button type="button" class="btn btn-warning" id="confirm_btn">保存</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" charset="UTF-8" th:src="@{/webjars/jquery/1.11.1/jquery.min.js}"></script>
<script type="text/javascript" charset="UTF-8" th:src="@{/webjars/bootstrap/3.3.6/js/bootstrap.min.js}"></script>
<th:block th:fragment="page_script">
	<!-- datatables_i18n -->
	<script type="text/x-template" charset="UTF-8" id="datatables_i18n" th:src="@{/webjars/datatables-plugins/1.10.20/i18n/Chinese.json}"></script>
	<!-- jquery-validation -->
	<script type="text/javascript" charset="UTF-8" th:src="@{/webjars/jquery-validation/1.19.0/jquery.validate.min.js}"></script>
	<script type="text/javascript" charset="UTF-8" th:src="@{/webjars/jquery-validation/1.19.0/additional-methods.min.js}"></script>
	<script type="text/javascript" charset="UTF-8" th:src="@{/webjars/jquery-validation/1.19.0/localization/messages_zh.min.js}"></script>
	<!-- datatables -->
	<script type="text/javascript" charset="UTF-8" th:src="@{/webjars/datatables/1.10.20/js/jquery.dataTables.min.js}"></script>
	<script type="text/javascript" charset="UTF-8" th:src="@{/webjars/datatables/1.10.20/js/dataTables.bootstrap.min.js}"></script>
	<!-- bootstrap -->
	<!-- bootstrap-datetimepicker -->
	<script type="text/javascript" charset="UTF-8" th:src="@{/webjars/bootstrap-datetimepicker/2.4.4/js/bootstrap-datetimepicker.min.js}"></script>
	<script type="text/javascript" charset="UTF-8" th:src="@{/webjars/bootstrap-datetimepicker/2.4.4/js/locales/bootstrap-datetimepicker.zh-CN.js}"></script>
	<!-- lhgdialog -->
	<script type="text/javascript" charset="UTF-8" th:src="@{/webjars/lhgdialog/4.2.0/lhgdialog.min.js?skin=bootstrap2}"></script>
	<!-- jquery-framework-ext -->
	<script type="text/javascript" charset="UTF-8" th:src="@{/webjars/framework-ext/1.0.0/jquery/js/jquery-framework-ext.js}"></script>
	<script type="text/javascript">
		//自行删除主键列描述
		var columns = [ {
			data : null,
			orderable : false,
			title : '序号',
			width : "40px"
		}, {
			data : "typeCode",
			title : "编码"
		}, {
			data : "typeName",
			title : "名称"
		}, {
			title : "操作",
			data : null,
			orderable : false,
			render : function(data, type, full, meta) {
				if (type === 'display') {
					var display = $('#col-opt-btn').html();
					return display;
				}
				return data;
			}
		} ];
	</script>
	<script type="text/javascript" th:src="@{/fun/appbasetype.js}"></script>
</th:block>
</html>